<template>
  <div class="login">
    <div class="video-box">
      <video id="myVideo" class="video-js video-background" :Autoplay="true" :loop="true" Controls muted>
        <source :src="this.BASE_URL + 'getMovie'" type="video/mp4" />
      </video>
      <van-overlay :show="true">
        <div class="wrapper" @click.stop>
          <div class="forms">
            <van-tabs :background="color" :title-inactive-color="fontcolor" :title-active-color="activecolor" :color="activecolor" swipeable line-width="80px">
              <van-tab title="账号登录">
                <van-form @submit="onSubmit" class="van_form">
                  <van-field class="form" v-model="username" name="username" label-width="50px" label="用户名" placeholder="用户名/手机号" />
                  <van-field class="form" v-model="password" label-width="50px" type="password" name="password" label="密码" placeholder="密码" />
                  <div style="margin: 16px; text-align: center">
                    <p style="margin-bottom: 7px; color: white">
                      没有账号？
                      <router-link style="color: white" to="/register">前去注册</router-link>
                    </p>
                    <van-button class="btn" round block type="info" native-type="submit">登录</van-button>
                    <div style="margin-top: 10px">
                      <van-radio-group v-model="radio">
                        <van-radio name="1" shape="square" icon-size="15">
                          <span style="color: white"> 我已阅读<a style="color: white" @click="userPact">《用户协议》</a>并同意协议 </span>
                        </van-radio>
                      </van-radio-group>
                    </div>
                  </div>
                </van-form>
              </van-tab>
            </van-tabs>
          </div>
        </div>
      </van-overlay>
    </div>
  </div>
</template>

<script>
import { Dialog, Notify, Toast } from 'vant'
import { login } from '../http/api'
import qs from 'qs'
import { BASE_URL } from '../http/http'

export default {
  name: 'Login',
  data() {
    return {
      BASE_URL: BASE_URL,
      color: 'transparent',
      fontcolor: 'white',
      activecolor: 'white',
      username: '',
      password: '',
      radio: ''
    }
  },
  methods: {
    onSubmit() {
      let data = {
        username: this.username,
        password: this.password
      }
      if (this.radio !== '1') {
        Toast('你还没有同意协议')
      } else {
        login(qs.stringify(data)).then((res) => {
          if (res.code === 0) {
            // 登陆成功，存储 token
            localStorage.setItem('token', res.token)
            // 登陆成功，存储 当前登录用户信息
            localStorage.setItem('user', JSON.stringify(res.user))
            this.$store.state.user = res.user.u_name
            // 跳转后台主页
            this.$router.push('/')
            Notify({ color: 'white', background: '#537081', type: 'success', message: res.msg, duration: 1000 })
          } else {
            // 登录失败
            localStorage.removeItem('token')
            localStorage.removeItem('user')
            Notify({ color: 'white', background: '#1ca596', type: 'warning', message: res.msg })
          }
        })
      }
    },
    userPact() {
      Dialog.alert({
        title: '用户协议',
        message:
          '<p>为使用本软件及服务，您应当阅读并遵守《本软件许可协议》（以下简称（本协议）。请您务必审慎阅读，从分理解各条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的单独协议，并选择接受或不接受。限制，免责条款可能以加粗形式提示您注意。</p>\n' +
          '    <p>除非您已阅读并接受本协议所有条款，否则您无权下载，安装或使用本软件及相关服务。您的下载，安装，登录等使用行为即视为您已阅读并同意上述协议的约束。</p>\n' +
          '    <p>如果您未满18周岁，请在法定监护人的陪同下阅读本协议及其他上述协议，并特别注意未成年人使用条款。</p>\n' +
          '    <p>一， 协议的范围</p>\n' +
          '    <p>本协议是您与本软件之间关于您下载，安装，使用，复制本软件，以及使用本软件相关服务所订立的协议。</p>\n' +
          '    <p>二， 关于本服务</p>\n' +
          '    <p>本服务内容是指本软件客户端软件提供包括但不限于IOS及Android等多个版本，您必须选择与所安装手机相匹配的软件版本。</p>\n' +
          '    <p>三， 软件的获取</p>\n' +
          '    <p>您可以直接从本软件授权的第三方获取。</p>\n' +
          '    <p>如果您从未经本软件授权的第三方获取本软件或与本软件名称相同的安装程序，本软件无法保证该软件能够正常使用，并对因此给您造成的损失不予负责。下载安装程序后，您需要按照该程序提示的步骤正确安装。</p>\n' +
          '    <p>为提供更加优质，安全的服务，在本软件安装时本软件可能推荐您安装其他软件，您可以选择安装或不安装。</p>\n' +
          '    <p>如果您不再需要使用本软件或者需要安装新版本软件，可以自行卸载。</p>\n' +
          '    <p>四， 软件的更新</p>\n' +
          '    <p>为了改善用户体验，完善服务内容，本软件将不断努力开发新的服务，并为您不时提供软件更新(这些更新可能会采取软件替换，修改，功能强化，版本升级等形式)。</p>\n' +
          '    <p>为了保证本软件及服务的安全性和功能的一致性，本软件有权不向您特别通知而对软件进行更新，或者对软件的部分功能效果进行改变或限制。</p>\n' +
          '    <p>本软件新版本发布后，旧版本的软件可能无法使用，本软件部保证旧版本软件继续可用及相应的服务，请您随时核对并下载最新版本。</p>\n' +
          '    <p>五， 用户个人信息保护</p>\n' +
          '    <p>保护用户个人信息是本软件的一项基本原则，本软件将会采取合理的措施保护用户的信息。除法律法规规定的情形外，未经用户许可本软件不会向第三方公开，透漏用户个人信息。为了向用户提供相关服务功能或改善技术和服务，您在注册账号或使用本服务的过程中，可能需要提供一些必要信息，本软件对相关信息采用国际化标准的加密存错与传输方式，保障用户个人信息的安全。</p>\n' +
          '    <p>未经您的同意，本软件不会向本软件以外的任何公司，组织和个人披露您的个人信息，但法律法规另有规定的除外。</p>\n' +
          '    <p>本软件非常重视对未成年人个人信息的保护。若您是18周岁以下的未成年人，在使用本软件的服务前，应事先取得您家长或法定监护人的书面同意。</p>\n' +
          '    <p>六， 主权力义务条款</p>\n' +
          '    <p>本软件特别提醒您应妥善保管您的账号，当您使用完毕后，应安全退出。</p>\n' +
          '    <p>用户注意事项：您的理解并同意，为了向您提供有效的服务，您在此许可本软件利用您移动通讯终端设备的处理器和宽带等资源。本软件使用过程中可能产生的数据流量的费用，您需自行向运营商了解相关资费信息。</p>\n' +
          '    <p>七， 用户行为规范</p>\n' +
          '    <p>您在使用本服务时需遵守法律法规，社会主义制度，国家利益，公民合法权利，社会公共秩序，道德风尚及信息真实性等“七条底线“要求。</p>\n' +
          '    <p>八， 软件使用规范</p>\n' +
          '    <p>除非法律允许或本软件的书面许可，您使用本软件过程中不得删除本软件及其副本上关于知识产权的信息，不得对本软件进行反向工程等或以其他方式尝试发现本软件的源代码。</p>\n' +
          '    <p>九， 对自己行为负责</p>\n' +
          '    <p> 您充分了解并同意，您必须为自己注册账号下的一切行为负责。</p>\n' +
          '    <p>十， 其他</p>\n' +
          '    <p>您使用本软件即视为您已阅读并同意接受本软件协议的约束。本软件有权在必要时修改本协议条款。如果您不接受修改后的条款，应当停止使用本软件。</p'
      }).then(() => {
        // on close
      })
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
.login {
  position: absolute;
  /*display: flex;*/
  height: 100%;
  width: 100%;
}
.form {
  /* border: 2px solid black 0.8; */
  border-radius: 20px;
  width: 300px;
  margin: 7px auto;
  background: none;
  background-color: rgba(235, 230, 230, 0.1);
}
.van-tab__text {
  color: white;
}
.btn {
  width: 180px;
  margin: 0 auto;
}
.video-box {
  position: relative;
  height: 100vh;
  background-color: #c1cff7;
  /*进行视频裁剪*/
  overflow: hidden;
}
.video-box > .forms {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.video-box .video-background {
  position: absolute;
  left: 50%;
  top: 50%;
  /*保证视频内容始终居中*/
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  /*保证视频充满屏幕*/
  object-fit: cover;
  min-height: 800px;
}
/deep/.van-field__control,
/deep/.van-cell__title {
  // color: rgb(2, 49, 26);
  color: rgba(253, 251, 251, 0.7);
}
</style>
